<template>
  <div>
    <span > F : Face; C: Column; R:Row </span>
    <el-tree
      :data="data"
      :props="defaultProps"
      :default-expanded-keys="[1, 2, 3]"
      node-key="levelId"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="node.level <= 2"
            type="text"
            size="mini"
            @click="append(data)"
            >Append</el-button
          >
          <el-button
            v-if="node.level <= 3"
            type="text"
            size="mini"
            @click="remove(node, data)"
            >Delete</el-button
          >
        </span>
      </span>
    </el-tree>

    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="defaultProps">
        <el-form-item label="层级数">
          <el-input v-model="location.levelNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data: [],
      location: {
        levelNum: "",
        parentId: "",
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      dialogVisible: false,
    };
  },
  created() {
    this.getMenus();
  },
  methods: {
    getMenus() {
      console.log("获取树状位置");
      axios.get("http://101.42.249.49:8083/ware/location/listtree").then((res) => {
        this.data = res.data.options;
        // this.options.children=res.data.resList;
        console.log(this.data);
      });
    },
    append(data) {
      console.log("node2->", data);
      this.dialogVisible = true;
      this.location.parentId = data.id;
    },
    submitData() {
      var levelId = this.location.levelNum;
      var parentId = this.location.parentId;
      this.$http({
        url: this.$http.adornUrl("/ware/location/save"),
        method: "post",
        data: this.$http.adornData({ parentId, levelId }, false),
      }).then(({ data }) => {
        this.$message({
          message: "位置保存成功",
          type: "success",
        });
        //关闭对话框
        this.dialogVisible = false;
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        // this.expandedKey = [node.parent.data.levelId];
      });
      console.log(levelId, parentId, "添加成功");
      this.location.levelNum=""
    },
    remove(node, data) {
      console.log(data);
      var ids = [data.id];
      this.$confirm(`是否删除【${data.label}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/ware/location/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单删除成功",
              type: "success",
            });
            //刷新出新的菜单
            this.getMenus();
            //设置需要默认展开的菜单
            // this.expandedKey = [node.parent.data.levelId];
          });
        })
        .catch(() => {});

      console.log("remove", node, data);
    },
  },
};
</script>

<style>
</style>